<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tanks</title>
<script src="modernizr.js"></script>
<script src="Debugger.js"></script>
</head>
<body>
	<div style="position: absolute; left: 50px; top: 50px;">
		<canvas id="canvas" width="320" height ="320">
			Your browser does not support canvas!
		</canvas>
	</div>
<script>
	
	function eventWindowLoaded() {
		canvasApp();
	}
	
	window.addEventListener("load", eventWindowLoaded, false);
	
	function canvasSupport() {
		return Modernizr.canvas;
	}

    var ctx;
    var canvas;
    var image;
    var counter = 0;
    var animationFrames = [1, 2, 3, 4, 5, 6, 7, 8];
    var frameIndex = 0;
    var rotation = 90;
    var x = -32;
    var y = 32;
    var dx = 1;
    var dy = 0;
    var map_index_offset = -1;
    var mapRows = 10;
    var mapCols = 10;
    var tileMap = [[32,31,31,31,1,31,31,31,31,32],
        [1,1,1,1,1,1,1,1,1,1],
        [32,1,25,1,25,1,25,1,1,32],
        [32,25,1,1,25,1,1,25,1,32],
        [32,1,1,1,25,25,1,25,1,32],
        [32,1,1,25,1,1,1,25,1,32],
        [32,1,1,1,1,1,1,25,1,32],
        [1,1,25,1,25,1,25,1,1,1],
        [32,1,1,1,1,1,1,1,1,32],
        [32,31,31,31,1,31,31,31,31,32]];
	
	function canvasApp() {
		if (!canvasSupport()) {
			return;
		} else {
			canvas = document.getElementById("canvas");
			ctx = canvas.getContext("2d");
		}
        image = new Image();
        image.src = "tanks_sheet.png";
        image.addEventListener("load", eventShipLoaded, false);
	}

    function eventShipLoaded(e) {
        startUp();
    }

    function startUp() {
        setInterval(drawScreen, 8);
    }
	
	function drawScreen() {

        for (var rowCtr = 0; rowCtr < mapRows; rowCtr++) {
            for (var colCtr = 0; colCtr < mapCols; colCtr++) {

                var tileId = tileMap[rowCtr][colCtr] + map_index_offset;
                var sourceX = Math.floor(tileId % 8) * 32;
                var sourceY = Math.floor(tileId / 8) * 32;

                ctx.drawImage(image, sourceX, sourceY, 32, 32
                        , colCtr * 32, rowCtr * 32, 32, 32);
            }
        }

        if (x > 320) {
            dx = -1;
            rotation = 270;
        } else if (x == -32) {
            dx = 1;
            rotation = 90;
        }

        x += dx;
        y += dy;

        //ctx.fillStyle = "#aaaaaa";
        //ctx.fillRect(0, 0, 500, 500);

        ctx.save();
        ctx.setTransform(1, 0, 0, 1, 0, 0);

        ctx.translate(x + 16, y + 16);
        var angleInRadians = rotation * Math.PI / 180;
        ctx.rotate(angleInRadians);

        var sourceX = Math.floor(animationFrames[frameIndex] % 8) * 32;
        var sourceY = Math.floor(animationFrames[frameIndex] / 8) * 32;

        //ctx.drawImage(image, sourceX, sourceY, 32, 32, x, y, 32, 32);
        ctx.drawImage(image, sourceX, sourceY, 32, 32, -16, -16, 32, 32);
        ctx.restore();
        frameIndex++;
        if (frameIndex == animationFrames.length) {
            frameIndex = 0;
        }
	}
	
	
</script>
</body>
</html>